import { Component, OnInit, ChangeDetectionStrategy, Input, OnChanges, SimpleChanges, ChangeDetectorRef } from '@angular/core';
import { Cell, Edge, Graph } from '@antv/x6';
import { cloneDeep } from 'lodash';
import { NzMessageService } from 'ng-zorro-antd/message';
import { NzModalService } from 'ng-zorro-antd/modal';
import { getSourceNodeByEdge } from 'src/app/util/util';
import { AddVoiceTriggerComponent } from '../add-voice-trigger/add-voice-trigger.component';
import { EdgeData, NodeData, WFButton, WFVoice } from '../type';

@Component({
  selector: 'wf-edge-set',
  templateUrl: './edge-set.component.html',
  styleUrls: ['./edge-set.component.less'],
  changeDetection: ChangeDetectionStrategy.OnPush
})
export class EdgeSetComponent implements OnInit, OnChanges {

  @Input() graph!: Graph;
  @Input() currentEdge!: Edge<Edge.Properties>;


  sourceNode!: Cell;

  sourceBtnList: WFButton[] = [];

  triggerBtnList: WFButton[] = [];
  triggerVoiceList: Array<WFButton> = [];

  constructor(
    private modal: NzModalService,
    private cd: ChangeDetectorRef,
    private message: NzMessageService
  ) { }

  ngOnChanges(changes: SimpleChanges): void {
    if (changes.currentEdge && !changes.currentEdge.isFirstChange()) {
      console.log('change:::', changes);
      this.getList();
    }
  }

  ngOnInit(): void {
    this.getList();
  }

  addBtnTrigger() {
    const canAllotBtnList = this.sourceBtnList.filter(i => !i.allot);
    if (canAllotBtnList.length > 0) {
      const btn = canAllotBtnList[0];
      btn.allot = true;

      const data = cloneDeep(this.sourceNode.getData<NodeData>());

      console.log('dddddd', data);

      const index = data.btnList.findIndex(data => data.id === btn.id);

      data.btnList[index] = btn;

      this.sourceNode.replaceData<NodeData>(data);

      const edgeData = cloneDeep(this.currentEdge.getData<EdgeData>());;


      edgeData.btnTrigger.push(btn);
      edgeData.voiceTrigger.push(btn);
      this.currentEdge.replaceData<EdgeData>(edgeData);
      this.getList();

    } else {
      this.message.create('warning', `无可分配按钮`);
    }
  }

  deleteBtnTrigger(btn: WFButton) {

    btn.allot = false;

    //#region 删除当前边中的触发器
    const edgeData = cloneDeep(this.currentEdge.getData<EdgeData>());
    const index = edgeData.btnTrigger.findIndex(i => i.id === btn.id);
    edgeData.btnTrigger.splice(index, 1);
    edgeData.voiceTrigger.splice(index, 1);
    this.currentEdge.updateData<EdgeData>(edgeData);
    //#endregion

    //#region 更新链接边源节点的按钮状态
    const data = cloneDeep(this.sourceNode.getData<NodeData>());
    const targetItem = data.btnList.find(i => i.id === btn.id)!;
    targetItem.allot = false;
    this.sourceNode.updateData<NodeData>(data);
    //#endregion

    this.getList();

    this.cd.markForCheck();
  }

  addVoiceTrigger() {
    const modalInstance = this.modal.create({
      nzTitle: '添加语音命令',
      nzContent: AddVoiceTriggerComponent,
      nzMaskClosable: false,
      nzFooter: null,
      nzWidth: '35%',
    });
    modalInstance.afterClose.subscribe(res => {
      if (res) {
        const data = cloneDeep(this.currentEdge.getData<EdgeData>());
        data.voiceTrigger.push(res);
        this.currentEdge.updateData<EdgeData>(data);
        this.getList();
      }
    });
  }

  editVoiceTrigger(voice: WFVoice | WFButton) {
    const modalInstance = this.modal.create({
      nzTitle: '编辑语音命令',
      nzContent: AddVoiceTriggerComponent,
      nzMaskClosable: false,
      nzFooter: null,
      nzWidth: '35%',
      nzComponentParams: {
        voice
      }
    });
    modalInstance.afterClose.subscribe(res => {
      if (res) {
        const data = cloneDeep(this.currentEdge.getData<EdgeData>());
        data.voiceTrigger.find(i => i.id === res.id)!.value = res.value;
        this.currentEdge.updateData<EdgeData>(data);
        this.getList();
      }
    });

  }

  deleteVoiceTrigger(voice: WFVoice | WFButton) {
    const data = cloneDeep(this.currentEdge.getData<EdgeData>());
    const index = data.voiceTrigger.findIndex(i => i.id === voice.id);
    data.voiceTrigger.splice(index, 1);
    this.currentEdge.updateData<EdgeData>(data);
    this.getList();
  }

  private getList() {
    if (this.currentEdge?.shape === 'wf-edge') {
      this.sourceNode = getSourceNodeByEdge(this.currentEdge, this.graph);
      this.sourceBtnList = this.sourceNode.getData().btnList;
      this.triggerBtnList = this.currentEdge.getData().btnTrigger;
      this.triggerVoiceList = this.currentEdge.getData().voiceTrigger;
      this.cd.markForCheck();
    }
  }

}
